<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: pink;
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 
                子元素会继承父元素body的行高，父元素设置行高为1.5，子元素继承后表示为子元素字体大小的1.5倍
                因此，div元素的行高为14 * 1.5 = 21px
            */
            font-size: 14px;
        }
        p {
            /* p的行高为18*1.5=27px */
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 
        1.2 继承性

            行高的继承性

            body {
                font : 12px/1.5 Microsoft YaHei ;
            }
            
            行高可以跟单位也可以不跟单位

            如果子元素没有设置行高，则会继承父元素的行高为1.5
            
            此时子元素的行高是:当前子元素的文字大小*1.5

            body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

     -->

     <div>蓝色的会议</div>
     <p>腾讯会议</p>


    <!-- li中的文字没有指定大小，因此会继承body的大小12px，行高也会继承，因此li的行高为12*1.5=18px -->
     <ul>
        <li>这里没有指定文字大小</li>
     </ul>
</body>
</html>